import React from 'react';
import { AlertTriangle, X, Trash2, Shield } from 'lucide-react';
import { Button } from './Button';

interface ConfirmDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title: string;
  message: string;
  confirmText?: string;
  cancelText?: string;
  type?: 'danger' | 'warning' | 'info';
  loading?: boolean;
}

export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
  isOpen,
  onClose,
  onConfirm,
  title,
  message,
  confirmText = '确认',
  cancelText = '取消',
  type = 'danger',
  loading = false
}) => {
  if (!isOpen) return null;

  const typeConfig = {
    danger: {
      icon: Trash2,
      iconColor: 'text-red-500',
      bgColor: 'from-red-50 to-red-100',
      borderColor: 'border-red-200',
      buttonVariant: 'danger' as const
    },
    warning: {
      icon: AlertTriangle,
      iconColor: 'text-yellow-500',
      bgColor: 'from-yellow-50 to-yellow-100',
      borderColor: 'border-yellow-200',
      buttonVariant: 'primary' as const
    },
    info: {
      icon: Shield,
      iconColor: 'text-blue-500',
      bgColor: 'from-blue-50 to-blue-100',
      borderColor: 'border-blue-200',
      buttonVariant: 'primary' as const
    }
  };

  const config = typeConfig[type];
  const IconComponent = config.icon;

  return (
    <div className="fixed inset-0 z-50 overflow-y-auto">
      <div className="flex items-center justify-center min-h-screen px-4 py-6">
        {/* Backdrop */}
        <div 
          className="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm animate-fade-in"
          onClick={onClose}
        />
        
        {/* Dialog */}
        <div className="relative bg-white rounded-2xl shadow-2xl w-full max-w-md animate-scale-in transform-gpu">
          {/* Header with gradient background */}
          <div className={`bg-gradient-to-r ${config.bgColor} ${config.borderColor} border-b rounded-t-2xl p-6`}>
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-3">
                <div className={`w-12 h-12 rounded-full bg-white shadow-lg flex items-center justify-center`}>
                  <IconComponent className={`w-6 h-6 ${config.iconColor}`} />
                </div>
                <div>
                  <h2 className="text-xl font-bold text-gray-800">{title}</h2>
                  <p className="text-sm text-gray-600">请确认您的操作</p>
                </div>
              </div>
              <button
                onClick={onClose}
                className="p-2 rounded-lg hover:bg-white hover:bg-opacity-50 transition-colors"
                disabled={loading}
              >
                <X className="w-5 h-5 text-gray-500" />
              </button>
            </div>
          </div>
          
          {/* Content */}
          <div className="p-6">
            <div className="mb-6">
              <p className="text-gray-700 leading-relaxed">{message}</p>
              {type === 'danger' && (
                <div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg">
                  <div className="flex items-start space-x-2">
                    <AlertTriangle className="w-4 h-4 text-red-500 mt-0.5 flex-shrink-0" />
                    <p className="text-sm text-red-700">
                      <strong>注意：</strong>此操作不可撤销，删除后数据将无法恢复。
                    </p>
                  </div>
                </div>
              )}
            </div>
            
            {/* Action buttons */}
            <div className="flex justify-end space-x-3">
              <Button
                variant="outline"
                onClick={onClose}
                disabled={loading}
                className="min-w-[80px]"
              >
                {cancelText}
              </Button>
              <Button
                variant={config.buttonVariant}
                onClick={onConfirm}
                loading={loading}
                className="min-w-[80px]"
              >
                {confirmText}
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};